
import { useEffect, useState } from 'react';
import { Toast } from 'antd-mobile';
import HeadTitle from '../../components/headtitle';
import MainContainer from '../../components/maincontainer';
import Container from '../../components/container';
import smartfetch from '../../atoms/smartfetch';
import { IData as D1, Query as Q1, Result as R1 } from '../api/activity/activityregistration.api';
import { Message as M2, Result as R2 } from '../api/activity/cancelregistration.api';
import api from '../../atoms/api';
import Btn from '../../components/btn';
import pages from '../../atoms/pages';
import Total from './total';
import Info from './info';


export default function Content({ aid }: { aid: string }) {
	//查询条件
	const [query, setQuery] = useState<Q1>({ aid });
	// 查询返回数据
	const [data, setData] = useState<D1[]>([]);
	const [count, setCount] = useState(0);
	//查询
	async function SearchData(q: Q1) {
		const d = await smartfetch<R1, Q1>(api['/api/activity/activityregistration'], 'get', q);
		if (d) {
			setData(d.data);
			setCount(d.count);
		}
	}
	//执行
	useEffect(() => {
		void SearchData(query);
	}, [aid]);
	return <>
		<MainContainer>
			<HeadTitle title='活动报名信息' url={`${pages['/myactivity-initiator']}?aid=${aid}`} />
			<Container>
				<Total total={count} />
				{data.map((it, i) => {
					return <Info key={it.id} no={i + 1} data={it} onCancel={(
						id) => {
						const d = data.map((v) => {
							if (id === v.id) {
								v.state = 0;
							}
							return v;
						});
						setData(d);
					}} onChange={(id, val) => {
						const d = data.map((v) => {
							if (id === v.id) {
								v.remark = val;
							}
							return v;
						});
						setData(d);
					}} />;
				})}
				{/* 按钮 */}
				<div className='btnv'>
					<Btn label='保存' onClick={async () => {
						const result = await smartfetch<R2, M2>(api['/api/activity/cancelregistration'], 'post', { data });
						if (result.ok) {
							Toast.show({
								content: '保存成功！',
								position: 'center',
								icon: 'success'
							});
						}
						else {
							Toast.show({
								content: '保存失败！',
								position: 'center',
								icon: 'fail'
							});
						}
					}} />
					<Btn label='返回首页' onClick={() => {
						window.location.href = pages['/'];
					}} />

				</div>
			</Container>
		</MainContainer>
		<style jsx>{`
.btnv{
display:flex;
flex-direction: column;
justify-content: flex-end;
align-items: center;
flex-grow: 1;
padding-bottom: 1rem;
}
		`}</style>
	</>;
}
